<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="{{ROOT}}assets/css/ui.css" />
    <script src="{{ROOT}}assets/js/jquery.min.js"></script>
    <script src="{{ROOT}}assets/js/login.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            height: 100%;
            width: 100%;
            display: flow-root;
        }

        .container {
            width: 308px;
        }
    </style>
</head>

<body>
    {% include "public/header.njk" %}
    <div class="container-md pt-4 px-3 pb-3">
        <h1 class="text-bold color-border-muted border-bottom py-4">Create a new repository</h1>
        <form action="new" method="post">
            <div class="py-4 px-3 d-flex f3">
                <div class="py-3 text-center text-bold">
                    {{ user.username }}<span class="mx-1">/</span>
                </div>
                <div class="py-3">
                    <input name="name" class="form-control" type="text" placeholder="Repository name"
                        aria-label="Repository name" />
                </div>
            </div>
            <div class="pt-4 pb-2 border-bottom color-border-muted px-3">
                <div class="form-group">
                    <div class="form-group-header">
                        <label for="description">Description</label>
                    </div>
                    <div class="form-group-body">
                        <input name="comment" class="form-control width-full" type="text" placeholder="Description" id="description" />
                    </div>
                </div>
            </div>
            <div class="pt-4 pb-2 border-bottom color-border-muted px-3">
                <div class="form-checkbox">
                    <label>
                      <input type="radio" name="type" value="public" />
                      <div class="d-flex">
                        <svg height="32" aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="32" data-view-component="true" class="octicon octicon-repo float-left mt-1 mr-2 color-fg-muted">
                            <path fill-rule="evenodd" d="M3 2.75A2.75 2.75 0 015.75 0h14.5a.75.75 0 01.75.75v20.5a.75.75 0 01-.75.75h-6a.75.75 0 010-1.5h5.25v-4H6A1.5 1.5 0 004.5 18v.75c0 .716.43 1.334 1.05 1.605a.75.75 0 01-.6 1.374A3.25 3.25 0 013 18.75v-16zM19.5 1.5V15H6c-.546 0-1.059.146-1.5.401V2.75c0-.69.56-1.25 1.25-1.25H19.5z"></path><path d="M7 18.25a.25.25 0 01.25-.25h5a.25.25 0 01.25.25v5.01a.25.25 0 01-.397.201l-2.206-1.604a.25.25 0 00-.294 0L7.397 23.46a.25.25 0 01-.397-.2v-5.01z"></path>
                        </svg>
                        <div class="d-flex flex-column">
                            <p class="mb-0 f4">Public</p>
                            <span class="f6 color-fg-muted">Anyone on the internet can see this repository. You choose who can commit.</span>
                        </div>
                      </div>
                    </label>
                </div>
                <div class="form-checkbox">
                    <label>
                      <input type="radio" name="type" value="private" />
                      <div class="d-flex">
                        <svg height="32" aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="32" data-view-component="true" class="octicon octicon-lock color-fg-attention float-left mt-1 mr-2">
                            <path fill-rule="evenodd" d="M6 9V7.25C6 3.845 8.503 1 12 1s6 2.845 6 6.25V9h.5a2.5 2.5 0 012.5 2.5v8a2.5 2.5 0 01-2.5 2.5h-13A2.5 2.5 0 013 19.5v-8A2.5 2.5 0 015.5 9H6zm1.5-1.75C7.5 4.58 9.422 2.5 12 2.5c2.578 0 4.5 2.08 4.5 4.75V9h-9V7.25zm-3 4.25a1 1 0 011-1h13a1 1 0 011 1v8a1 1 0 01-1 1h-13a1 1 0 01-1-1v-8z"></path>
                        </svg>
                        <div class="d-flex flex-column">
                            <p class="mb-0 f4">Private</p>
                            <span class="f6 color-fg-muted">You choose who can see and commit to this repository.</span>
                        </div>
                      </div>
                    </label>
                </div>
            </div>
            <div class="pt-3 pb-4 border-bottom color-border-muted px-3">
                <button class="btn btn-primary" type="submit">Create Repo</button>
            </div>
        </form>
    </div>
</body>

</html>